import React, {useContext} from 'react';
import GlobalContext from '@/GlobalContext';
import {View} from 'react-native';
import {Button, Text, Avatar, ListItem, BottomSheet} from '@rneui/base';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const TabStack = createBottomTabNavigator();

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import {Drawer} from 'react-native-drawer-layout';
import Nav from './Nav';
import CreateCompanyNav from './CreateCompanyNav';
import {useSafeState} from 'ahooks';

const leftIconSize = 18;
const rightIconSize = 20;

const PersonInfo = () => {
  return (
    <View
      style={{
        minHeight: 80,
        flexDirection: 'row',
        alignItems: 'center',
      }}>
      <Avatar
        size={60}
        rounded={false}
        title={'头像'}
        titleStyle={{fontSize: 12}}
        containerStyle={{backgroundColor: '#999', borderRadius: 8}}
        avatarStyle={{borderRadius: 8}}
      />
      <View
        style={{
          flex: 1,
          marginLeft: 10,
        }}>
        <Text h4>{'用户名'}</Text>
        <Text style={{marginTop: 6}}>账号：abc001</Text>
      </View>
    </View>
  );
};
const routeParentPath = 'WxBus';
export default ({navigation}) => {
  const [open, setOpen] = useSafeState(false);
  const [createCompanyNavVisible, setCreateCompanyNavVisible] = useSafeState(false);

  return (
    <>
      <CreateCompanyNav
        navigation={navigation}
        isVisible={createCompanyNavVisible}
        setIsVisible={setCreateCompanyNavVisible}
      />
      <Drawer
        open={open}
        onOpen={() => setOpen(true)}
        onClose={() => setOpen(false)}
        drawerStyle={{
          // width: '85%',
          width: 305,
        }}
        drawerType="slide"
        renderDrawerContent={() => {
          return (
            <View style={{flex: 1}}>
              <View style={{flex: 1}}>
                <ListItem
                  onPress={() => {
                    navigation.push(`${routeParentPath}/PersionDetail`);
                  }}>
                  <ListItem.Content>
                    <PersonInfo />
                  </ListItem.Content>
                  <ListItem.Chevron size={rightIconSize} />
                </ListItem>
                <ListItem>
                  <Avatar
                    size={26}
                    rounded={false}
                    title={'@'}
                    titleStyle={{fontSize: 12}}
                    containerStyle={{backgroundColor: '#999', borderRadius: 8}}
                    avatarStyle={{borderRadius: 8}}
                  />
                  <ListItem.Content>
                    <Text>XXXXXX有限责任公司</Text>
                  </ListItem.Content>
                  <FontAwesome5
                    name="check"
                    size={26}
                    style={{
                      marginRight: 10,
                    }}
                    color="#CCC"
                  />
                </ListItem>
                <ListItem
                  onPress={() => {
                    setCreateCompanyNavVisible(true)
                  }}>
                  <FontAwesome5
                    name="plus"
                    size={26}
                    style={{
                      marginRight: 10,
                    }}
                    color="#CCC"
                  />
                  <ListItem.Content>
                    <Text>创建/加入企业</Text>
                  </ListItem.Content>
                </ListItem>
              </View>
              <View
                style={{
                  flexDirection: 'row',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  padding: 10,
                  backgroundColor: '#f9f9f9',
                }}>
                <Text
                  onPress={() => {
                    navigation.push(`${routeParentPath}/SeniorEntry`);
                  }}
                >高级功能</Text>
                <FontAwesome5
                  name="cog"
                  size={26}
                  onPress={() => {
                    navigation.navigate(`${routeParentPath}/Setting`);
                  }}
                  style={{
                    marginRight: 10,
                  }}
                />
              </View>
            </View>
          );
        }}>
        <Nav setOpen={setOpen} prevOpen={open} />
      </Drawer>
    </>
  );
};
